import { ref, computed, watch } from 'vue'
import { useI18n } from 'vue-i18n'

interface SiteConfig {
  site: {
    title: string
    description: string
    keywords: string
    logo: {
      text: string
      subtext: string
    }
    [key: string]: any;
  }
  navigation: Array<{
    name: string
    path: string
    key: string
  }>
  common: {
    loading: string
    error: string
    language: string
    chinese: string
    english: string
    [key: string]: any;
  }
  home: {
   [key: string]: any;
  }
  footer: {
   [key: string]: any;
  }
  [key: string]: any;
}

const config = ref<SiteConfig | null>(null)
const loading = ref(true)
const error = ref<string | null>(null)

export const useConfig = () => {
  const { locale } = useI18n()
  
  const loadConfig = async (language?: string) => {
    try {
      loading.value = true
      error.value = null
      
      const lang = language || locale.value || 'tl'
      const configFile = `/config.${lang}.json`
      
      const response = await fetch(configFile)
      if (!response.ok) {
        // 如果特定语言文件不存在，fallback到中文
        const fallbackResponse = await fetch('/config.tl.json')
        if (!fallbackResponse.ok) {
          throw new Error(`HTTP error! status: ${fallbackResponse.status}`)
        }
        const configData = await fallbackResponse.json()
        config.value = configData
      } else {
        const configData = await response.json()
        config.value = configData
      }
      
      // 更新页面标题和meta信息
      if (config.value?.site) {
        document.title = config.value.site.title
        
        const metaDescription = document.querySelector('meta[name="description"]')
        if (metaDescription) {
          metaDescription.setAttribute('content', config.value.site.description)
        }
        
        const metaKeywords = document.querySelector('meta[name="keywords"]')
        if (metaKeywords) {
          metaKeywords.setAttribute('content', config.value.site.keywords)
        }
      }
      
    } catch (err) {
      console.error('Failed to load config:', err)
      error.value = err instanceof Error ? err.message : 'Unknown error'
    } finally {
      loading.value = false
    }
  }

  // 监听语言变化，自动重新加载配置
  watch(locale, (newLocale) => {
    loadConfig(newLocale)
  })

  const getConfig = () => config.value
  
  const getSiteConfig = () => config.value?.site
  
  const getNavigationConfig = () => config.value?.navigation || []
  
  const getCommonConfig = () => config.value?.common
  
  const getHomeConfig = () => config.value?.home
  
  const getServicesConfig = () => config.value?.services
  
  const getAboutConfig = () => config.value?.about
  
  const getContactConfig = () => config.value?.contact
  
  const getFooterConfig = () => config.value?.footer
  
  const getThemeConfig = () => config.value?.theme

  // 获取图标组件的helper函数
  const getIconComponent = (iconName: string) => {
    const icons: Record<string, string> = {
      lightning: 'M13 10V3L4 14h7v7l9-11h-7z',
      shield: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z',
      globe: 'M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
      package: 'M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10',
      container: 'M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16',
      code: 'M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4',
      server: 'M5 12V7a1 1 0 011-1h12a1 1 0 011 1v5M5 12l0 5a1 1 0 001 1h12a1 1 0 001-1v-5M5 12h14m-7 0v6',
      database: 'M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4',
      settings: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z'
    }
    return icons[iconName] || icons.package
  }

  // 获取颜色类的helper函数
  const getColorClasses = (color: string) => {
    const colorMap: Record<string, { bg: string; text: string; icon: string }> = {
      blue: { bg: 'bg-blue-50', text: 'text-blue-600', icon: 'bg-blue-600' },
      green: { bg: 'bg-green-50', text: 'text-green-600', icon: 'bg-green-600' },
      purple: { bg: 'bg-purple-50', text: 'text-purple-600', icon: 'bg-purple-600' },
      red: { bg: 'bg-red-50', text: 'text-red-600', icon: 'bg-red-600' },
      yellow: { bg: 'bg-yellow-50', text: 'text-yellow-600', icon: 'bg-yellow-600' }
    }
    return colorMap[color] || colorMap.blue
  }

  return {
    config: computed(() => config.value),
    loading: computed(() => loading.value),
    error: computed(() => error.value),
    loadConfig,
    getConfig,
    getSiteConfig,
    getNavigationConfig,
    getCommonConfig,
    getHomeConfig,
    getServicesConfig,
    getAboutConfig,
    getContactConfig,
    getFooterConfig,
    getThemeConfig,
    getIconComponent,
    getColorClasses
  }
} 